<template>
  <div>
    <headerTop></headerTop>
    <!-- 主体 -->
    <div class="Order_content wrap">
      <div class="header">
        <div @click="GoIndex()" class="fl">
          <img src="@/assets/image/logo_shape@2x.png" alt />
          联众医药
        </div>
        <div class="fr">
          <el-steps :active="state" align-center>
            <el-step title="选择商品" description></el-step>
            <el-step title="核对订单信息" description></el-step>
            <el-step title="提交订单" description></el-step>
          </el-steps>
        </div>
      </div>
      <div class="content">
        <div class="topTitle">填写核对订单信息</div>
        <div class="content_c">
          <div class="titles titless">
            收货地址
            <div class="fr">新建收货地址</div>
          </div>
          <div @click="addresTabs() " class="addres_list">
            <div :class="{active1:addresType == -1}" class="fl ffl">快递</div>
            <div v-if="addresList != ''" class="fl a_l_d">
              {{addresList.user_name}}
              <i></i>
              {{addresList.province_name}}-{{addresList.city_name}}-{{addresList.area_name}}-{{addresList.address}}
              <i></i>
              {{addresList.mobile}}
              <span>默认地址</span>
              <p @click="addresAll = 1" v-if="addresAll == 0">
                更多地址
                <img src="@/assets/image/ShoppingCart_Moreaddresses@2x.png" alt />
              </p>
            </div>
          </div>
          <div v-if="addresAll == 1">
            <div
              @click="addresTab(0,v,i)"
              v-for="(v,i) in addresList2"
              :key="i"
              class="addres_list"
            >
              <div :class="{active1:addresType == v.user_name+i}" class="fl ffl">快递</div>
              <div class="fl a_l_d">
                {{v.user_name}}
                <i></i>
                {{v.province_name}}-{{v.city_name}}-{{v.area_name}}-{{v.address}}
                <i></i>
                {{v.mobile}}
              </div>
            </div>
          </div>
          <div
            @click="addresTab(1,v,i)"
            v-for="(v,i) in shopList"
            :key="i"
            class="addres_list addres_ziti"
          >
            <div :class="{active1:addresType == v.shop_name+i}" class="fl ffl">自提</div>
            <div class="fl a_l_d">
              {{v.shop_name}}
              <i></i>
              {{v.address}}
              <i></i>
              {{v.mobile}}
            </div>
          </div>
          <div class="pay_type">
            <div class="titles">支付方式</div>
            <span @click="payType='alipayScan'" :class="{active1:payType=='alipayScan'}">支付宝</span>
            <span @click="payType='wechatScan'" :class="{active1:payType=='wechatScan'}">微信</span>
            <!-- <span :class="{active1:payType==2}">银行卡</span> -->
            <span @click="payType='balance'" :class="{active1:payType=='balance'}">账户余额</span>
          </div>
          <div class="goodsList">
            <div class="titles">商品清单</div>
            <div v-for="(v,i) in arr.goodsDatas " :key="i" class="goodsList_box">
              <img class="fl" :src="v.goods_img" alt />
              <div class="g_b_details fl red">
                <p class="two">复{{v.goods_name}} {{v.unit}}</p>
                <p class="one">
                  <span>满折</span>该商品满十件九折，满二十件八折。
                </p>
              </div>
              <div class="goods_sum fr">
                <span class="span2">
                  <span class="span3">X</span>
                  {{v.num}}
                </span>
                <span class="span1">￥{{v.price}}</span>
              </div>
            </div>
          </div>
          <div class="invoice pay_type">
            <div class="titles">发票信息</div>
            <span @click="invoiceType = ''" :class="{active1:invoiceType==''}">不要发票</span>
            <span @click="invoiceType = 1" :class="{active1:invoiceType==1}">普通发票</span>
          </div>
          <div class="discount">
            <div class="titles">优惠/积分</div>
            <div class="discount_d">
              <div :class="{active1:couponType==1}" class="d_d_d">
                <div class="fl">
                  ￥
                  <span>10</span>
                  <br />优惠券
                </div>
                <div class="fr">
                  <p class="p1 one">商品优惠券</p>
                  <p class="p2 one">满50元时可使用</p>
                  <p class="p3 one">2019.09.09 至 2019.09.11期间可用</p>
                </div>
              </div>
            </div>
            <div class="discount_b">
              <span @click="integral = 1" v-show="integral == 0"></span>
              <!--  不使用 -->
              <span @click="integral = 0" v-show="integral == 1" :class="{active2:integral==1}"></span>
              <!--使用 -->
              {{arr.score}}
              <div class="fr">
                金额总抵用
                <span>￥{{arr.money_score}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="b_bottom">
          <div class="fl">
            购药提示
            <br />1.药品为特殊商品，非质量问题不退货。
            <br />2.医疗医药经营类企事业单位不能从医药零售企业购买药品。
          </div>
          <div class="fr txt1">
            ￥ {{arr.goodsMoneySum}}
            <!-- 总金额 -->
            <br />
            ￥{{arr.postage}}
            <!-- 运费 -->
            <br />
            ￥ {{arr.money_youhui}}
            <!-- 优惠金额 -->
          </div>
          <div class="fr txt2">
            <span v-if="arr!= ''">{{arr.goodsDatas.length}}</span> 件商品，总金额
            <br />运费
            <br />抵扣金额
          </div>
        </div>
        <div class="money">
          <p class="p1">
            应付金额
            <span>￥{{arr.money}}</span>
          </p>
          <p v-if="addresTypes == 1" class="p2">
            寄送至： {{addresList1.province_name}}-{{addresList1.city_name}}-{{addresList1.area_name}}-{{addresList1.address}}
            收货人：{{addresList1.user_name}} {{addresList1.mobile}}
          </p>
          <p v-if="addresTypes == 2" class="p2">
            自提 ：{{addresList1.shop_name}}-{{addresList1.address}}
            联系方式 ： {{addresList1.mobile}}
          </p>
        </div>
      </div>
      <div class="send">
        <button @click="sendChecking()">提交订单</button>
      </div>
    </div>
    <div class="bg1">
      <publicBottom></publicBottom>
    </div>
  </div>
</template>
<script>
import headerTop from "@/components/public/public_headerTop.vue";
import publicBottom from "@/components/public/public_bottom";

import { confirm_order } from "@/request/index"; //// 商品直接下单 进入确认订单页面
import { get_shop_list } from "@/request/public"; // 商铺列表
import { user_address_List } from "@/request/user"; //地址列表
import { submit_order } from "@/request/index"; // 提交订单

export default {
  components: {
    headerTop,
    publicBottom
  },
  data() {
    return {
      state: 1, // 步骤条
      addresType: -1, // 快递 自提
      addresTypes: 1, //1  快递  2自提
      payType: "alipayScan", // 支付 方式
      invoiceType: "", //发票 方式
      couponType: 0, // 优惠券
      integral: 0, // 积分
      goods_id: "", //商品 ID
      shop_id: "", // 店铺 ID
      arr: "", // 主体信息
      addresList: [], // 地址 列表
      addresAll: 0, //显示全部
      addresList1: [], // 地址 列表
      addresList2: [], // 地址 列表
      shopList: [], // 药店 列表
      goodsList: [], // 商品 列表
      couponList: [], //优惠券 集合
      num: 1,
      lng: "",
      lat: ""
    };
  },
  created() {
    let datas = localStorage.getItem("lzyyToken");
    let Athis = this;
    if (datas != null) {
      this.$tokens = datas;
    } else {
      this.$message.error("登录错误，请重新登录");
      setTimeout(function() {
        Athis.$router.replace({ path: "/land" });
      }, 1000);
    }

    this.goods_id = this.$route.query.id; //商品 ID
    this.num = this.$route.query.num; //商品  数量
    console.log(this.num);
    
    this.shop_id = localStorage.getItem("lzyyShopId"); // 店铺 ID
    this.lng = localStorage.getItem("lzyyShopLng"); //
    this.lat = localStorage.getItem("lzyyShopLat"); //
    this.start();
  },
  methods: {
    sendChecking() {
      // 快递
      if (this.addresTypes == 1) {
        submit_order({
          token: this.$tokens,
          goods_id: this.goods_id, //商品id
          shop_id: this.shop_id, //店铺ID
          num: this.num, //数量
          couponids: this.couponList, //优惠券 集合
          posttype: 1, // 配送方式
          usescore: this.integral, //使用积分
          addressid: this.addresList1.id, //地址ID
          invoice_id: this.invoiceType // 是否使用发票
        }).then(res => {
          if (res.code == 1) {
            let data = res.data;
            this.$router.replace({
              path: `./pay?money=${data.money}&out_trade_no=${data.out_trade_no}&pay_type=${this.payType}`
            });
          }
        });
      } else {
        // 自提
        submit_order({
          token: this.$tokens,
          goods_id: this.goods_id, //商品id
          shop_id: this.shop_id, //店铺ID
          num: this.num, //数量
          couponids: this.couponList, //优惠券 集合
          posttype: 2, // 配送方式
          usescore: this.integral, //使用积分
          invoice_id: this.invoiceType // 是否使用发票
        }).then(res => {
          if (res.code == 1) {
            let data = res.data;
            this.$router.replace({
              path: `./pay?money=${data.money}&out_trade_no=${data.out_trade_no}&pay_type=${this.payType}`
            });
          }
        });
      }
    },
    //  默认地址
    addresTabs() {
      this.addresTypes = 1;
      this.addresType = -1;
      this.addresList1 = this.addresList;
    },
    //   快递 还是 自提
    addresTab(e, v, i) {
      if (e == 0) {
        this.addresList1 = v;
        this.addresTypes = 1; //   快递 还是 自提
        this.addresType = v.user_name + i;
      } else {
        this.addresTypes = 2; //   快递 还是 自提
        this.addresList1 = v;
        this.addresType = v.shop_name + i;
      }
    },
    GoIndex() {
      this.$router.replace({ path: "/" });
    },
    start() {
      //  下单
      confirm_order({
        token: this.$tokens,
        goods_id: this.goods_id,
        shop_id: this.shop_id
      }).then(res => {
        this.arr = res.data;
      });
      //    药店
      get_shop_list({
        lng: this.lng,
        lat: this.lat
      }).then(ress => {
        if (ress.data.data != "") {
          this.shopList = ress.data.data;
        }
      });
      //   地址列表
      user_address_List({
        token: this.$tokens
      }).then(res => {
        let data = res.data.data;
        for (let i = 0; i < data.length; i++) {
          if (data[i].is_default === 1) {
            this.addresList = data[i];
            this.addresList1 = data[i];
          } else {
            this.addresList2.push(data[i]);
          }
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
//   商品 订单 详情
.Order_content {
  margin-top: 36px;

  .header {
    height: 108px;

    .fl {
      font-size: 30px;
      padding-top: 33px;
      font-weight: 500;
      color: rgba(0, 0, 0, 1);
    }

    img {
      width: 56px;
      height: 36px;
    }

    .fr {
      width: 540px;
      padding-top: 30px;
    }
  }

  .content {
  }

  .topTitle {
    height: 40px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    line-height: 40px;
    padding-left: 30px;
  }

  .content_c {
    border: 1px solid rgba(230, 230, 230, 1);
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 40px;
  }

  .titles {
    height: 40px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    line-height: 40px;
    margin-top: 20px;
    margin-bottom: 30px;
  }

  .titless {
    margin-bottom: 0;
  }

  .addres_list {
    padding-top: 30px;
    overflow: hidden;
    padding-left: 34px;
    font-size: 16px;
    color: rgba(51, 51, 51, 1);
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: 30px;

    // padding-top: 30px;
    .ffl {
      width: 100px;
      height: 32px;
      line-height: 28px;
      text-align: center;
      // background  : rgba(230, 255, 249, 1);
      border: 2px solid #cccccc;
      margin-right: 36px;
    }

    .a_l_d {
      padding-top: 6px;

      span {
        font-size: 12px;
        color: white;
        text-align: center;
        display: inline-block;
        width: 65px;
        height: 18px;
        margin-left: 20px;
        background: rgba(204, 204, 204, 1);
      }

      p {
        margin-top: 26px;
        color: #dcdcdc;
      }
    }
  }

  .addres_ziti {
    padding-top: 30px;
  }

  .pay_type {
    span {
      display: inline-block;
      width: 100px;
      height: 32px;
      line-height: 28px;
      text-align: center;
      // background  : rgba(230, 255, 249, 1);
      border: 2px solid #cccccc;
      margin-right: 36px;
    }
  }

  .goodsList {
  }

  .goodsList_box {
    height: 140px;
    background: rgba(252, 252, 252, 1);
    padding-left: 50px;
    padding-top: 20px;
    padding-right: 50px;

    img {
      display: inline-block;
      width: 100px;
      height: 100px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(230, 230, 230, 1);
      // vertical-align: middle;
    }

    .g_b_details {
      display: inline-block;
      margin-left: 20px;
      height: 100px;
      width: 700px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      padding-top: 12px;

      .two {
        height: 36px;
        line-height: 18px;
        margin-bottom: 10px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
      }

      span {
        margin-left: 50px;
        display: inline-block;
        text-align: center;
        width: 38px;
        height: 20px;
        margin-right: 12px;
        background: rgba(253, 182, 90, 1);
      }
    }

    .goods_sum {
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);

      .span2 {
        margin-right: 20px;
      }

      .span3 {
        font-size: 12px;
      }

      .span1 {
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: rgba(241, 25, 25, 1);
      }
    }
  }

  .discount {
    margin-top: 30px;

    .discount_d {
      padding-top: 20px;
      margin-top: 10px;
      border: 1px solid #f2f2f2;
      border-bottom: none;
      display: flex;
      flex-wrap: wrap;
      padding-left: 26px;
    }

    .titles {
      margin: 0;
    }

    .d_d_d {
      width: 344px;
      height: 80px;
      background: rgba(230, 255, 249, 1);
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 20px;
      margin-right: 26px;

      .fl {
        width: 97px;
        height: 80px;
        text-align: center;
        padding-top: 10px;
        color: white;
        font-size: 16px;
        background: rgba(69, 239, 197, 1);
      }

      span {
        font-size: 30px;
      }

      .fr {
        width: 240px;
        height: 80px;
        padding-left: 12px;
        padding-top: 8px;
      }

      .p1 {
        font-size: 17px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(1, 1, 1, 1);
        margin-bottom: 6px;
      }

      .p2 {
        font-size: 15px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(102, 102, 102, 1);
        line-height: 19px;
        margin-bottom: 2px;
      }

      .p3 {
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(102, 102, 102, 1);
        line-height: 19px;
      }
    }
  }

  .discount_b {
    height: 36px;
    line-height: 36px;
    background: rgba(252, 252, 252, 1);
    border: 1px solid rgba(242, 242, 242, 1);
    font-size: 14px;
    color: rgba(0, 0, 0, 1);
    position: relative;
    text-indent: 60px;

    > span {
      position: absolute;
      left: 30px;
      top: 8px;
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 1px solid rgba(102, 102, 102, 1);
      border-radius: 50%;
    }

    .fr {
      margin-right: 30px;

      span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: rgba(240, 0, 0, 1);
      }
    }
  }

  .b_bottom {
    margin-top: 40px;

    overflow: hidden;

    .fl {
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(240, 0, 0, 1);
      line-height: 26px;
    }

    .fr {
      line-height: 30px;
      text-align: right;
    }

    .txt1 {
      min-width: 160px;

      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
    }

    .txt2 {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;

      span {
        color: rgba(243, 84, 84, 1);
      }
    }
  }

  .money {
    height: 72px;
    background: rgba(252, 252, 252, 1);
    padding-top: 8px;

    .p1 {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
      text-align: right;

      span {
        display: inline-block;
        min-width: 156px;
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: rgba(240, 0, 0, 1);
      }
    }

    .p2 {
      margin-top: 6px;
      text-align: right;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(179, 179, 179, 1);
    }
  }

  .send {
    text-align: right;
    margin-top: 24px;
    margin-bottom: 88px;
  }

  button {
    font-size: 20px;
    width: 168px;
    height: 40px;
    background: rgba(240, 0, 0, 1);
    border-radius: 8px;
  }

  .active1 {
    border: 2px solid #38eec1 !important;
    background: #e6fff9;
  }

  .active2 {
    border: 2px solid #38eec1 !important;
    background: #38eec1;
  }
}
</style>
